<!-- 维修量统计表 -->
<template>
  <div class="app-container maintenance-table">
    <NewPageFilter
      v-model:query="filterInfo.query.queryParams"
      :filter-list="filterInfo.searchList"
      :filter-btn="filterInfo.searchBtn"
    >
      <template v-slot:filter-groupIdList>
        <el-input
          type="input"
          :disabled="true"
          class="not-mongolia"
          placeholder="请选择维修组"
          v-model="filterInfo.query.groupNames"
        >
          <template #append>
            <el-icon @click="openGroupWindow"><MoreFilled /></el-icon>
          </template>
        </el-input>
      </template>
      <template v-slot:filter-maintenanceUserName>
        <el-input
          type="input"
          :disabled="true"
          class="not-mongolia"
          placeholder="请选择维修工程师"
          v-model="filterInfo.query.maintenanceUserName"
        >
          <template #append>
            <el-icon @click="openRepairUserWindow"><MoreFilled /></el-icon>
          </template>
        </el-input>
      </template>

      <template v-slot:filter-time>
        <el-date-picker
          v-model="time"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="至"
          :picker-options="$fn.pickerOptionsFn()"
          align="right"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="timeChange"
        ></el-date-picker>
      </template>
    </NewPageFilter>
    <div class="content">
      <div class="table">
        <p>工程师工作量汇总(按次数)</p>
        <br />
        <!-- 表格 -->
        <TableContainer
          :refresh="tableInfo.refresh"
          :init-curpage="tableInfo.initCurpage"
          v-model:data="tableInfo.data"
          :api="tableInfo.api"
          :isDynamic="true"
          :pager="false"
          :summary="true"
          :summaryFieldList="tableInfo.summaryFieldList"
          :checkBox="false"
          :query="filterInfo.query"
          :field-list="tableInfo.fieldList"
          :handle="tableInfo.handle"
          :row-class-name="tableRowClassName"
          @handleEvent="handleEvent"
        >
        </TableContainer>
      </div>
      <!-- echarts -->
      <div class="echarts">
        <monthly-consume-bar
          :data="tableInfo.data"
          :permission-list="$permission('consumeOrder:list')"
        ></monthly-consume-bar>
      </div>
    </div>
    <!-- 维修人员 -->
    <SelectRepairUser
      v-if="selectRepairUserInfo.visible"
      v-model:showDialog="selectRepairUserInfo.visible"
      :api="selectRepairUserInfo.api"
      :check-box="true"
      :saveEmpty="true"
      :highlight-row="true"
      :query="selectRepairUserInfo.query"
      :checkedList="selectRepairUserInfo.checkedList"
      @callback="selectRepairUserCallBack"
    />
    <selectMaintenanceGroup
      v-if="selectMaintenanceGroupInfo.visible"
      v-model:showDialog="selectMaintenanceGroupInfo.visible"
      :check-box="true"
      :saveEmpty="true"
      :highlight-row="true"
      :query="selectMaintenanceGroupInfo.query"
      :checkedList="selectMaintenanceGroupInfo.checkedList"
      @callback="selectMaintenanceGroupCallBack"
    />
  </div>
</template>

<script setup name="maintenanceTable">
import { selectMaintenanceSummary,exportMaintenanceSummary } from '@/api/dataQuery'
import { getMaintenanceGroupUserPage } from '@/api/repair'
import MonthlyConsumeBar from './monthlyConsumeBar'
const { proxy } = getCurrentInstance()

const time = ref('')
const filterInfo = ref({
  data: {},
  query: {
    // queryParams: {},
    // sortString: "",
    // customizeUserVO: {},
    // queryMap: {},
    orgId: proxy.$store.state.user.userInfo.user
      ? proxy.$store.state.user.userInfo.user.orgId
      : '',
  },
  searchList: [
    {
      label: '维修组',
      slot: true,
      value: 'groupIdList',
      event: search,
    },
    {
      label: '维修工程师',
      slot: true,
      value: 'maintenanceUserName',
      event: search,
    },
    {
      label: '时间',
      slot: true,
      value: 'time',
      event: search,
    },
  ],
  searchBtn: [
    { type: 'button', label: '搜索', event: search },
    {
      type: 'button',
      label: '重置',
      event: clearSearch,
    },
    { type: 'button', label: '导出', event: exportExcel },
  ],
})
//选择维修人员
const selectRepairUserInfo = reactive({
  visible: false,
  saveEmpty: true,
  api:getMaintenanceGroupUserPage,
  query: {
    userIdNotIn: '',
    orgId: proxy.$store.state.user.userInfo.user
      ? proxy.$store.state.user.userInfo.user.orgId
      : '',
  },
  checkedList: []
})
const selectMaintenanceGroupInfo = reactive({
  visible: false,
  saveEmpty: true,
  query: {},
  checkedList: []
})
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  api: selectMaintenanceSummary,
  data: [],
  selections: [],
  summaryFieldList: [
    { value: 'maintenanceCount', formatter: proxy.$fn.qtyFormatter },
  ],
  fieldList: [
    { label: '维修工程师', value: 'maintenanceUserName' },
    { label: '维修次数', value: 'maintenanceCount' },
  ],
})
function timeChange(val) {
  if (val && val.length) {
    filterInfo.value.query.startDate = val[0]
    filterInfo.value.query.endDate = val[1]
  } else {
    filterInfo.value.query.startDate = ''
    filterInfo.value.query.endDate = ''
  }
  search()
}
function clearSearch() {
  filterInfo.value.query.startDate = ''
  filterInfo.value.query.endDate = ''
  filterInfo.value.query['userId'] = ''
  filterInfo.value.query['maintenanceUserName'] = ''
  filterInfo.value.query['groupIdList'] = ''
  filterInfo.value.query['groupNames'] = ''
  selectMaintenanceGroupInfo.checkedList = []
  selectRepairUserInfo.checkedList = []
  time.value = ''
  search()
}
function search() {
  tableInfo.value.initCurpage = Math.random()
  tableInfo.value.refresh = Math.random()
}
function openRepairUserWindow() {
  selectRepairUserInfo.visible = true
  selectRepairUserInfo.query['groupIdList'] = filterInfo.value.query['groupIdList'] && filterInfo.value.query['groupIdList'].length ? filterInfo.value.query['groupIdList'].toString() : ''
}
function selectRepairUserCallBack(row) {
  if (row && row.length) {
    const userNames = []
    const userIds = []
    const ids = []
    row.forEach(item => {
      userIds.push(item.userId)
      userNames.push(item.name)
      ids.push(item.id)
    })
    filterInfo.value.query['userId'] = userIds.join(',')
    filterInfo.value.query['maintenanceUserName'] = userNames.join(',');
    selectRepairUserInfo.checkedList = ids
  } else {
    selectRepairUserInfo.checkedList = []
    filterInfo.value.query['userId'] = ''
    filterInfo.value.query['maintenanceUserName'] = ''
  }
  search()
}
function openGroupWindow(){
  selectMaintenanceGroupInfo.visible = true
}
function selectMaintenanceGroupCallBack(data){
  if(data && data.length){
    let ids = data.map(item => item.id)
    let names = data.map(item => item.name)
    filterInfo.value.query['groupIdList'] = ids.join(',');
    filterInfo.value.query['groupNames'] = names.join(',');
    selectMaintenanceGroupInfo.checkedList = ids
  }else{
    filterInfo.value.query['groupIdList'] = ''
    filterInfo.value.query['groupNames'] = ''
    selectMaintenanceGroupInfo.checkedList = []
  }
  selectRepairUserInfo.checkedList = []
  filterInfo.value.query['userId'] = ''
  filterInfo.value.query['maintenanceUserName'] = ''
  search()
}
function exportExcel() {
  exportMaintenanceSummary(filterInfo.value.query).then((resp) => {
    if (resp) {
      proxy.$fn.parseExcel(resp)
    }
  })
}
function handleEvent() {}
</script>

<style scoped lang="scss">
.maintenance-table {
  .content {
    display: flex;
    flex-direction: row;
    .table {
      width: 20%;
    }
    .echarts {
      width: 78%;
      margin-left: 20px;
    }
  }
}
</style>
